<template>
	<view class="box">
		<view class="don">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>

		<view class="con" v-if="this.current == 0">
			<view class="con_li" v-for="(item, index) in testPapers" :key="index">
				<view class="img">
					<u-icon name="edit-pen" color="rgba(255,255,255,0.8)" size="44"></u-icon>
				</view>
				<view class="text"> {{ item.F_TestPaperName }} </view>
				<view class="text1"> 限时固定考试 </view>
				<view class="text2"> {{ item.F_TestAnswerTime }} 分钟</view>
				<view class="text3"> 满分 {{ item.F_PassingGrade }}分 </view>
				<view class="text4"> 待考试 </view>
				<view class="btn">
					<u-button type="primary" :plain="true" shape="circle" @click="gotest(item.F_Id)">去考试</u-button>
				</view>
			</view>

		</view>
		<view class="con" v-if="this.current == 1">
			<view class="con_li" v-for="(item, index) in listall" :key="index">
				<view class="img">
					<u-icon name="edit-pen" color="rgba(255,255,255,0.8)" size="44"></u-icon>
				</view>
				<view class="text"> {{ item.F_TestPaperName }} </view>
				<view class="text1"> 限时固定考试 </view>
				<view class="text2"> {{ item.F_TestAnswerTime }} 分钟</view>
				<view class="text3"> 满分 {{ item.F_PassingGrade }}分 </view>
				<view class="text4"> 已完成 </view>
				<view class="btn">
					<u-button type="primary" :plain="true" shape="circle" @click="gotest111(index)">去查看</u-button>
				</view>
			</view>
		
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request";
	export default {
		data() {
			return {
				list: [{
						name: "待考试",
					},

					{
						name: "已批改",
					},
				],
				current: 0,
				testPapers: [],
				listall:[],
			};
		},
		created() {
			this.rendering();
			this.getlist();
		},
		methods: {
			getlist(){
					 
				const query = {
					userId: JSON.parse(localStorage.getItem('userInfo')).data.userId,
				};
				request({
					url: "/api/system/DataInterface/354695004859401733/Actions/Response",
					method: "POST",
					Headers: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					data: JSON.stringify(query),
				}).then((res) => {
					console.log(res.data);
					this.listall=res.data.data
				});
			},
			rendering() {
				console.log('111');
				const query = {
					userId: "048657c1-ecb1-4e5d-aced-6126ceae779e",
				};
				request({
					url: "/api/system/DataInterface/354364824601232837/Actions/Response",
					method: "POST",
					Headers: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					data: JSON.stringify(query),
				}).then((res) => {
					console.log(res.data.data);
					let data = res.data.data;
					//console.log(data);
					for (var i = 0; i < data.length; i++) {
						this.testPapers.push(data[i]);
					}
				});
				//   console.log(this.testPapers);
			},
			change(index) {
				console.log(index);
				this.current = index;

			},
			gotest111(index){
				// console.log(this.listall[index].F_Score);
				let total = this.listall[index].F_Score
				let id = this.listall[index].ID
				
				uni.navigateTo({
					url: `/pages/apply/ontest/df111/index?id=${id}&total=${total}`,
					fail: (err) => {
						this.$u.toast("暂无此页面");
					},
				});
			},
			gotest(id) {
				
				uni.navigateTo({
					url: "/pages/apply/ontest/dati/index?id=" + id,
					fail: (err) => {
						this.$u.toast("暂无此页面");
					},
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.box {
		height: 100vh;
		background-color: #eef3f4;
	}

	.con {
		width: 100%;
		height: 100vh;
		padding: 2rpx 24rpx;
		background-color: #eef3f4;

		.con_li {
			width: 100%;
			height: 242rpx;
			background-color: #fff;
			border-radius: 16rpx;
			position: relative;
			margin: 24rpx 0;

			.btn {
				width: 150rpx;
				height: 66rpx;
				position: absolute;
				right: 20rpx;
				top: 146rpx;

				.u-size-default {
					height: 66rpx;
				}
			}

			.img {
				width: 100rpx;
				height: 100rpx;
				background: linear-gradient(180deg, #5ab0ff 0%, #2585dd 100%);
				border-radius: 50%;
				position: absolute;
				left: 24rpx;
				top: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.text {
				width: 320rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 44rpx;
				position: absolute;
				top: 28rpx;
				left: 142rpx;
			}

			.text1 {
				width: 150rpx;
				height: 28rpx;
				background: #f5faff;
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #59a9f2;
				position: absolute;
				left: 142rpx;
				top: 80rpx;
			}

			.text2 {
				width: 150rpx;
				height: 28rpx;
				background: #f5faff;
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #59a9f2;
				position: absolute;
				left: 300rpx;
				top: 80rpx;
			}

			.text3 {
				width: 150rpx;
				height: 28rpx;
				background: #f5faff;
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #59a9f2;
				position: absolute;
				right: 120rpx;
				top: 80rpx;
			}

			.text4 {
				width: 84rpx;
				height: 40rpx;
				color: #26aeae;
				position: absolute;
				left: 142rpx;
				top: 156rpx;
			}
		}
	}

	.non {
		width: 100%;
		height: 100vh;
		padding: 2rpx 24rpx;
		height: 800rpx;
		background-color: #eef3f4;

		.con_li {
			width: 100%;
			height: 230rpx;
			background-color: #fff;
			border-radius: 16rpx;
			position: relative;
			margin: 24rpx 0;

			.btn {
				width: 120rpx;
				height: 34rpx;
				font-size: 36rpx;
				color: #ff3c3c;
				position: absolute;
				top: 154rpx;
				right: 20rpx;
			}

			.text {
				width: 320rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 44rpx;
				position: absolute;
				top: 28rpx;
				left: 20rpx;
			}

			.text1 {
				width: 150rpx;
				height: 28rpx;
				background: #f5faff;
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #59a9f2;
				position: absolute;
				left: 20rpx;
				top: 80rpx;
			}

			.text2 {
				width: 150rpx;
				height: 28rpx;
				background: #f5faff;
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #59a9f2;
				position: absolute;
				left: 180rpx;
				top: 80rpx;
			}

			.text3 {
				width: 100rpx;
				height: 28rpx;
				background: #f5faff;
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #59a9f2;
				position: absolute;
				right: 290rpx;
				top: 80rpx;
			}

			.text5 {
				width: 140rpx;
				height: 28rpx;
				background: #f5faff;
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #59a9f2;
				position: absolute;
				right: 140rpx;
				top: 80rpx;
			}

			.text4 {
				width: 84rpx;
				height: 40rpx;
				color: #797f85;
				position: absolute;
				left: 20rpx;
				top: 156rpx;
			}
		}
	}

	.son {
		width: 100%;
		height: 100vh;
		padding: 2rpx 24rpx;
		height: 800rpx;
		background-color: #eef3f4;

		.con_li {
			width: 100%;
			height: 230rpx;
			background-color: #fff;
			border-radius: 16rpx;
			position: relative;
			margin: 24rpx 0;

			.btn {
				width: 300rpx;
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #b9bec3;
				position: absolute;
				top: 162rpx;
				right: 20rpx;
			}

			.img {
				width: 100rpx;
				height: 100rpx;
				background: linear-gradient(180deg, #5ab0ff 0%, #2585dd 100%);
				border-radius: 50%;
				position: absolute;
				left: 24rpx;
				top: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.text {
				width: 320rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 44rpx;
				position: absolute;
				top: 28rpx;
				left: 142rpx;
			}

			.text1 {
				width: 150rpx;
				height: 28rpx;
				background: #f5faff;
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #59a9f2;
				position: absolute;
				left: 142rpx;
				top: 80rpx;
			}

			.text2 {
				width: 150rpx;
				height: 28rpx;
				background: #f5faff;
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #59a9f2;
				position: absolute;
				left: 300rpx;
				top: 80rpx;
			}

			.text3 {
				width: 100rpx;
				height: 28rpx;
				background: #f5faff;
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #59a9f2;
				position: absolute;
				right: 170rpx;
				top: 80rpx;
			}

			.text5 {
				width: 140rpx;
				height: 28rpx;
				background: #f5faff;
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #59a9f2;
				position: absolute;
				right: 24rpx;
				top: 80rpx;
			}

			.text4 {
				width: 84rpx;
				height: 40rpx;
				color: #26aeae;
				position: absolute;
				left: 142rpx;
				top: 156rpx;
			}
		}
	}
</style>
